<template>
  <view class="diary-book-container">
    <!-- 顶部导航 -->
    <view class="header">
      <button class="nav-btn" @click="prevWeek">← 上一周</button>
      <text class="week-title">{{ currentWeekTitle }}</text>
      <button class="nav-btn" @click="nextWeek">下一周 →</button>
    </view>
    
    <!-- 日记本主体 -->
    <view class="diary-book">
      <!-- 左页 -->
      <view class="page left-page">
        <view class="page-header">
          <text class="page-title">日记本</text>
          <text class="page-subtitle">{{ formatWeekRange(currentWeekStart) }}</text>
        </view>
        
        <view class="week-grid">
          <view 
            v-for="(day, index) in weekDays" 
            :key="index"
            class="day-item"
            :class="{ 'has-diary': day.hasDiary }"
            @click="viewDayDetail(day)"
          >
            <view class="day-header">
              <text class="day-week">{{ day.weekday }}</text>
              <text class="day-date">{{ day.date }}</text>
            </view>
            <view class="day-content">
              <text class="content-preview" v-if="day.hasDiary">
                {{ day.preview }}
              </text>
              <text class="no-diary" v-else>
                无记录
              </text>
            </view>
            <view class="day-footer" v-if="day.hasDiary">
              <text class="mood-icon">{{ getMoodIcon(day.mood) }}</text>
              <text class="image-count" v-if="day.imageCount > 0">
                📷{{ day.imageCount }}
              </text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 右页 (空白页或详情页) -->
      <view class="page right-page">
        <view class="page-header">
          <text class="page-title">记录</text>
        </view>
        <view class="instructions">
          <text>点击左侧日期查看或编辑日记</text>
        </view>
      </view>
    </view>
    
    <!-- 底部分页指示器 -->
    <view class="pagination">
      <view 
        v-for="n in totalPages" 
        :key="n"
        class="page-dot"
        :class="{ active: n === currentPage }"
        @click="goToPage(n)"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  name: "DiaryBook",
  props: {
    diaries: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentWeekOffset: 0, // 相对于当前周的偏移量
      currentPage: 1,
      totalPages: 10 // 假设有10页
    }
  },
  computed: {
    // 当前周的起始日期
    currentWeekStart() {
      const now = new Date();
      const weekStart = new Date(now);
      weekStart.setDate(now.getDate() - now.getDay() + 1 + (this.currentWeekOffset * 7)); // 周一为一周开始
      return weekStart;
    },
    
    // 当前周的结束日期
    currentWeekEnd() {
      const weekEnd = new Date(this.currentWeekStart);
      weekEnd.setDate(weekEnd.getDate() + 6);
      return weekEnd;
    },
    
    // 当前周标题
    currentWeekTitle() {
      const start = this.currentWeekStart;
      const end = this.currentWeekEnd;
      if (this.currentWeekOffset === 0) {
        return "本周";
      } else if (this.currentWeekOffset === -1) {
        return "上周";
      } else if (this.currentWeekOffset === 1) {
        return "下周";
      } else {
        return `${start.getMonth() + 1}.${start.getDate()} - ${end.getMonth() + 1}.${end.getDate()}`;
      }
    },
    
    // 一周七天的数据
    weekDays() {
      const days = [];
      const diaryMap = this.getDiaryMap();
      
      for (let i = 0; i < 7; i++) {
        const currentDate = new Date(this.currentWeekStart);
        currentDate.setDate(this.currentWeekStart.getDate() + i);
        
        const dateStr = this.formatDate(currentDate);
        const diary = diaryMap[dateStr];
        
        days.push({
          date: currentDate.getDate(),
          weekday: this.getWeekdayName(i),
          fullDate: currentDate,
          dateStr: dateStr,
          hasDiary: !!diary,
          preview: diary ? this.getPreviewContent(diary.content) : '',
          mood: diary ? diary.mood : '',
          imageCount: diary && diary.images ? diary.images.length : 0,
          diaryId: diary ? diary.id : null
        });
      }
      
      return days;
    }
  },
  methods: {
    // 获取日记映射表 (日期 -> 日记)
    getDiaryMap() {
      const map = {};
      this.diaries.forEach(diary => {
        const dateKey = this.formatDate(new Date(diary.date));
        map[dateKey] = diary;
      });
      return map;
    },
    
    // 格式化日期为 YYYY-MM-DD
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 获取星期名称
    getWeekdayName(index) {
      const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      return weekdays[index];
    },
    
    // 格式化一周范围
    formatWeekRange(startDate) {
      const endDate = new Date(startDate);
      endDate.setDate(startDate.getDate() + 6);
      return `${startDate.getMonth() + 1}.${startDate.getDate()} - ${endDate.getMonth() + 1}.${endDate.getDate()}`;
    },
    
    // 获取内容预览
    getPreviewContent(content) {
      if (!content) return '';
      return content.length > 8 ? content.substring(0, 8) + '...' : content;
    },
    
    // 获取心情图标
    getMoodIcon(mood) {
      const moodIcons = {
        'happy': '😊',
        'sad': '😢',
        'angry': '😠',
        'excited': '🤩',
        'calm': '😌'
      };
      return moodIcons[mood] || '😊';
    },
    
    // 上一周
    prevWeek() {
      this.currentWeekOffset--;
    },
    
    // 下一周
    nextWeek() {
      this.currentWeekOffset++;
    },
    
    // 跳转到指定页
    goToPage(page) {
      this.currentPage = page;
    },
    
    // 查看某天详情
    viewDayDetail(day) {
      if (day.hasDiary) {
        uni.navigateTo({
          url: `/pages/diary/detail?diaryId=${day.diaryId}`
        });
      } else {
        // 跳转到新建日记页面
        const dateStr = this.formatDate(day.fullDate);
        uni.navigateTo({
          url: `/pages/diary/edit?date=${dateStr}`
        });
      }
    }
  }
}
</script>

<style scoped>
.diary-book-container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.nav-btn {
  background-color: #007aff;
  color: white;
  border: none;
  padding: 15rpx 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.week-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.diary-book {
  display: flex;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  min-height: 80vh;
}

.page {
  flex: 1;
  padding: 40rpx;
  border-right: 2rpx dashed #ddd;
}

.page:last-child {
  border-right: none;
}

.right-page {
  background-color: #fafafa;
}

.page-header {
  text-align: center;
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #eee;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.page-subtitle {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
  display: block;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.day-item {
  border: 2rpx solid #eee;
  border-radius: 15rpx;
  padding: 20rpx;
  min-height: 180rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.day-item.has-diary {
  border-color: #007aff;
  background-color: #f0f8ff;
}

.day-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.day-week {
  font-size: 24rpx;
  color: #666;
}

.day-date {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.day-content {
  flex: 1;
  margin-bottom: 15rpx;
}

.content-preview {
  font-size: 28rpx;
  color: #333;
}

.no-diary {
  font-size: 24rpx;
  color: #999;
  font-style: italic;
}

.day-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mood-icon {
  font-size: 32rpx;
}

.image-count {
  font-size: 24rpx;
  color: #666;
}

.instructions {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #999;
  font-size: 28rpx;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
  gap: 15rpx;
}

.page-dot {
  width: 15rpx;
  height: 15rpx;
  border-radius: 50%;
  background-color: #ddd;
}

.page-dot.active {
  background-color: #007aff;
  transform: scale(1.2);
}
</style>
